1
00:00:00,600 --> 00:00:03,000
Hello and welcome to this lecture.

2
00:00:03,300 --> 00:00:09,610
In this lecture or we are going to create the stylin for our quiz.

3
00:00:09,650 --> 00:00:13,140
Use the C S S.

4
00:00:14,120 --> 00:00:16,850
So this is the hastier male quiz.

5
00:00:16,920 --> 00:00:20,340
So we're going to use some of the high.

6
00:00:20,360 --> 00:00:27,670
These aren't classes defined for this history of mail document to style a quiz.

7
00:00:27,870 --> 00:00:32,120
So let me switch to my CSM So this is a blank.

8
00:00:32,120 --> 00:00:36,540
He says we don't need that Dels just a label.

9
00:00:36,600 --> 00:00:39,930
So the time know what file this is.

10
00:00:40,050 --> 00:00:47,690
So this is where I will be creating the styling for the quiz.

11
00:00:47,910 --> 00:00:53,340
The way is going to work so that this lecture doesn't take too much time.

12
00:00:53,520 --> 00:01:03,000
I will pre write the code add the code and then explain it so enough to watch me type all the time.

13
00:01:03,000 --> 00:01:06,630
I have had some code here like one.

14
00:01:06,630 --> 00:01:09,140
Basically I am using the import.

15
00:01:09,270 --> 00:01:17,400
Basically what this is I am going to use this font font called Rocket font family called Rocket and

16
00:01:17,400 --> 00:01:19,180
I'm getting that from Google.

17
00:01:19,670 --> 00:01:21,970
Well that's where I'm seeing here.

18
00:01:22,080 --> 00:01:28,020
Get this font from Google so you have to import it before you can use it so that's what I've done in

19
00:01:28,020 --> 00:01:35,430
line one line two is the selector that I am going to be styling.

20
00:01:35,430 --> 00:01:38,990
So basically saying he hates one which is the heading.

21
00:01:39,270 --> 00:01:42,200
These are the stylin I am playing to it.

22
00:01:42,350 --> 00:01:51,380
The font family B is in the rocket from Google and I've also got a substitute font called serif.

23
00:01:51,450 --> 00:01:56,340
So if the rocket is not available it'll default to the second option.

24
00:01:56,340 --> 00:02:03,430
Always good to specify a more than one font when you are declaring a font family property line for is

25
00:02:03,510 --> 00:02:08,260
a text a line property where I want a text to be centred.

26
00:02:08,340 --> 00:02:13,730
Land 5 is a caller have set and views a hex value.

27
00:02:13,900 --> 00:02:18,610
Line 6 is basically the size of the font.

28
00:02:18,630 --> 00:02:20,510
Or did text for that.

29
00:02:20,710 --> 00:02:31,550
He wants Selecta I have added another channel coff code from line 8 to line 21 line.

30
00:02:31,560 --> 00:02:43,050
It is a u l selector which means on ordered list so the stylin I'm giving it to is that I don't want

31
00:02:43,210 --> 00:02:43,770
any.

32
00:02:43,820 --> 00:02:44,430
That is no.

33
00:02:44,500 --> 00:02:46,820
But let's not think that's what that means.

34
00:02:47,020 --> 00:02:47,930
Lists.

35
00:02:48,000 --> 00:02:48,680
Property.

36
00:02:48,680 --> 00:02:59,760
I've said that to non So dobbyn on no ring or no bullets for that or not the list items line 11 to 15

37
00:02:59,850 --> 00:03:03,950
is the actual I list which is this.

38
00:03:04,080 --> 00:03:07,280
You use the airline to list the items.

39
00:03:07,410 --> 00:03:17,660
Right so the airline selector specified a fun family of four rocket serif font size of two.

40
00:03:17,940 --> 00:03:22,750
You can use em or you can use pixels colour.

41
00:03:22,780 --> 00:03:27,180
I've said that to a house value line 16 to 20.

42
00:03:27,180 --> 00:03:31,320
Is he employed so low to wear their type.

43
00:03:31,320 --> 00:03:36,980
Is a radio so when you send them the questions you need to select which of the radio buttons.

44
00:03:37,100 --> 00:03:39,630
So I've said that too.

45
00:03:39,690 --> 00:03:46,430
So the properties are loose when the body says it is zero pixels they with 28 pixels height.

46
00:03:46,590 --> 00:03:55,110
And I use MS here so you can use pixels if you like but you can if you it depends on which ones you

47
00:03:55,110 --> 00:03:56,440
are comfortable with.

48
00:03:56,640 --> 00:03:59,490
Of pixels you can use either.

49
00:04:00,120 --> 00:04:06,670
I have had some more style in here from line 12 3 to 35.

50
00:04:06,670 --> 00:04:14,930
So our start with line 23 to 25 years so that the abuse in dippie select or hear the piece the logos

51
00:04:14,930 --> 00:04:22,420
were all styling and this stylin have applied to the font family is going to use rocket serif with be

52
00:04:22,470 --> 00:04:25,540
the substitute front line.

53
00:04:25,540 --> 00:04:33,230
26 is a comment that's how you will specify a comment in CSA.

54
00:04:33,510 --> 00:04:39,540
So that line of code will be ignored because it is a comment line.

55
00:04:39,830 --> 00:04:46,060
27 is a class so that is a class called Kiwis container.

56
00:04:46,320 --> 00:04:48,200
So the the.

57
00:04:48,390 --> 00:04:53,350
This diamine from 20 to 30 for giving a background colour.

58
00:04:53,410 --> 00:04:59,910
Using the hex value the board radios property have said to it big source.

59
00:05:00,440 --> 00:05:06,050
Body radios is what gives the car like rounded corner the width.

60
00:05:06,080 --> 00:05:16,480
I've sent the set to 75 percent so it would be 7 tapped 75 percent off the pier ENT container.

61
00:05:16,610 --> 00:05:17,270
So whatever.

62
00:05:17,270 --> 00:05:20,880
Until now the the acquis container is in.

63
00:05:20,890 --> 00:05:25,100
It will take 75 percent of the width of that container.

64
00:05:25,100 --> 00:05:27,260
That's what that means.

65
00:05:27,460 --> 00:05:32,020
Again you could use pig saws if you are more comfortable with picky sorts.

66
00:05:32,030 --> 00:05:41,530
I am 31 is a margin of sedita or 2 which means it will automatically centre the container.

67
00:05:41,840 --> 00:05:45,070
Okay told is centreing on the page.

68
00:05:45,080 --> 00:05:46,190
That's what I meant.

69
00:05:46,580 --> 00:05:49,130
Margin from the top in the from the top.

70
00:05:49,160 --> 00:05:53,190
I want it to move down a hundred and ninety pixels.

71
00:05:53,270 --> 00:06:01,420
The padding margin is the space outside while padding is Espy's inside the element.

72
00:06:01,730 --> 00:06:07,420
So I've set them to heart 190 pixels at 5 pixels respectively.

73
00:06:07,420 --> 00:06:11,230
The position I have set the position to relative.

74
00:06:13,650 --> 00:06:27,090
I have had decades so more propertys and their values lie felt he'd added a class cord next button.

75
00:06:27,240 --> 00:06:32,500
So does stylin I have used for the next botin class.

76
00:06:33,080 --> 00:06:36,930
I start like 39 which is a border radius.

77
00:06:36,930 --> 00:06:43,530
I've said that to 6 pixels with a hundred and fifty pixels height 40 pixels.

78
00:06:43,830 --> 00:06:46,250
TEXT kaline have said it was Centre.

79
00:06:46,300 --> 00:06:51,660
I won a bullet in to be Centre bag runkel are set to use the hex value again.

80
00:06:51,660 --> 00:06:58,850
You can use the kolok name if you know the column name by fairlie's okay as well here.

81
00:06:59,010 --> 00:07:01,710
44 is just a comment.

82
00:07:01,720 --> 00:07:04,160
So that code will be ignored.

83
00:07:04,320 --> 00:07:09,820
Ly in 45 is a colour which refers to the colloguing actual text.

84
00:07:09,860 --> 00:07:18,930
Forty six is ifone family again amusin rockets antsier if 47 the font weight it refers to a horrific

85
00:07:19,220 --> 00:07:20,360
thought.

86
00:07:20,400 --> 00:07:22,120
How thick the front would be.

87
00:07:22,140 --> 00:07:25,120
Who said that to board position.

88
00:07:25,160 --> 00:07:32,600
I said it to a relative margin to auto padding from the top 20 pixels.

89
00:07:33,680 --> 00:07:40,100
Okay I can get rid of 44 hours using a lap for a test.

90
00:07:40,110 --> 00:07:42,860
If you think so and get rid of that done.

91
00:07:42,930 --> 00:07:54,960
Now I have added on another class which is what is called Question from line 51 to 6 to all one.

92
00:07:55,270 --> 00:08:02,270
So I've already gone through some of this property is with previous stylin on this file so I'm not going

93
00:08:02,270 --> 00:08:05,480
to go too deep because I'll just be repeating myself.

94
00:08:05,700 --> 00:08:13,320
So a lot of this dialogue we have used before so is just the same theme height weight and saw.

95
00:08:13,530 --> 00:08:21,080
So I'm not going to run through that because I've done that with the class I have added on another class

96
00:08:21,080 --> 00:08:27,410
yet chord with message and these are the stylin I give given that class.

97
00:08:27,480 --> 00:08:33,120
Again I'm not going to run through it because the same thing like I've done before with the other classes

98
00:08:33,570 --> 00:08:36,230
so basic The only difference here.

99
00:08:36,330 --> 00:08:40,860
Here I've not used the hex value I've used the actual caller name.

100
00:08:43,010 --> 00:08:51,870
I have added a couple more classes like 70 to 75 is the choice list class.

101
00:08:52,160 --> 00:08:56,990
So that's obviously where you make your selection for the quiz answers.

102
00:08:56,990 --> 00:08:58,690
So again similar thing.

103
00:08:58,700 --> 00:09:06,680
The only difference here the font family slightly different views kuria and serif carlaw have said to

104
00:09:06,680 --> 00:09:11,670
blue violet again 77 to 86.

105
00:09:11,750 --> 00:09:22,320
There's another class called result the values of propertys values specified are self explanatory is

106
00:09:22,400 --> 00:09:29,340
similar to what we've gone before in this in this lechon for this farm.

107
00:09:29,390 --> 00:09:29,900
Okay.

108
00:09:30,260 --> 00:09:36,480
So again ideally we'd hide everything we've mentioned before.

109
00:09:36,560 --> 00:09:43,100
Boy was there any part of this lecture you're not familiar with or you're not sure anybody styled it.

110
00:09:43,700 --> 00:09:45,620
Please feel free to let me know.

111
00:09:45,630 --> 00:09:48,880
Ha be more than happy to explain further.

112
00:09:49,110 --> 00:09:56,210
So I will just save this document and then we can review how a page and see what the document looks

113
00:09:56,210 --> 00:09:59,580
like after the stylin have been a.

114
00:10:00,080 --> 00:10:08,300
So this is what the page looks like the moment when we are doing our job as group series are well then

115
00:10:08,300 --> 00:10:14,350
I use javascript to make it more interactive so that's set for this election.

116
00:10:14,420 --> 00:10:15,830
Thanks for watching.

117
00:10:15,830 --> 00:10:16,840
Bye for now.